<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试ing</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Ww5NKISU9HVuqBLDQQgcSfnp665hAVzp&s=1"></script>
    <script type="text/javascript">
        // 调用HTML5 GeoLocation API获取地理位置
        function getLocation() {

            document.getElementById('mapcontainer').innerHTML = '正在搜寻中，请稍候。。。';

            var options = {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 1000
            }

            if (navigator.geolocation) {
                //浏览器支持geolocation
                navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
            } else {
                //浏览器不支持geolocation
                alert('浏览器不支持GeoLocation!');
            }
        }

        // 获取成功
        function onSuccess(position) {

            // 经纬度
            var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;
            // 创建一个坐标
            var geopoint = new BMapGL.Point(longitude, latitude);
            alert("经度:" + longitude + ", 纬度:" + latitude);

            // 使用百度地图API创建地图实例并地图初始化，设置中心点坐标和地图级别 
            var map = new BMapGL.Map("mapcontainer");
            map.centerAndZoom(geopoint, 15);
            map.addControl(new BMapGL.NavigationControl());


            // 设置标注的图标,可自己定义图标
            // var icon = new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(23, 25), {
            //     offset: new BMapGL.Size(10, 25), // 定位图标尺寸  
            //     imageOffset: new BMapGL.Size(0, 0 - 11 * 25) // 设置图片偏移  
            // });

            //坐标转义
            translateCallback = function(data) {
                console.log(data);
                if (data.status === 0) {
                    var marker = new BMapGL.Marker(data.points[0]);
                    map.addOverlay(marker);
                    var label = new BMapGL.Label("你在这里", {
                        offset: new BMapGL.Size(20, -10)
                    });
                    marker.setLabel(label); //添加百度label
                    map.setCenter(data.points[0]);
                }
            }

            setTimeout(function() {
                var convertor = new BMapGL.Convertor();
                var pointArr = [];
                pointArr.push(geopoint);
                convertor.translate(pointArr, COORDINATES_GCJ02, COORDINATES_BD09, translateCallback)
            }, 1000);



            // // 设置标注的经纬度
            // var marker = new BMapGL.Marker(new BMapGL.Point(longitude, latitude), {
            //     icon: icon
            // });

            // // 把标注添加到地图上
            // map.addOverlay(marker);

            // 设置点击事件
            marker.addEventListener("click", function() {
                alert("经度:" + longitude + ", 纬度:" + latitude);
            });
        }

        // 获取失败
        function onError(error) {
            switch (error.code) {
                case 1:
                    alert("位置服务被拒绝");
                    break;

                case 2:
                    alert("暂时获取不到位置信息");
                    break;

                case 3:
                    alert("获取信息超时");
                    break;

                case 4:
                    alert("未知错误");
                    break;
            }
        }

        window.onload = getLocation;
    </script>


</head>

<body>
    <div>
        <h1 style="position: relative;">Hello World!</h1>
        <p>这就是地图啦</p>
    </div>
    <div id="mapcontainer" style="width:960px;height:960px"></div>
</body>

</html>